<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./chart-font/iconfont.css">
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        html,
        body {
            height: 100%;
            width: 100%;
        }

        body {
            display: flex;

        }

        .aside {
            /* box-sizing: border-box; */
            width: 20%;
            padding: 0 30px;
            background-color: black;
            line-height: 40px;
            color: gray;
            list-style: none;
        }

        .aside li {
            box-sizing: border-box;
            padding: 0 10px;
            border-bottom: 1px solid gray;
        }

        .aside li span {
            font-size: 18px;
            margin-right: 10px;
        }

        .aside .icon-touxiang {
            font-size: 25px;
        }

        .aside .admin,
        .name,
        .example {
            line-height: 60px;
        }

        .aside .extra {
            border: 0;
        }

        main {
            flex: 1;
            display: flex;
            flex-direction: column;
            background: #f4f6f9
        }

        .head {

            height: 60px;
            background-color: white;
            padding: 0 20px;
        }

        .head .headleft {
            width: 40%;
            display: flex;
            align-items: center;
            justify-content: space-evenly;
        }

        .head .headleft .icon-icon_mulu {
            font-size: 18px;
        }

        .head .headleft ul {
            color: gray;
            align-items: center;
            list-style: none;
        }

        .head ul li {
            padding: 20px 20px;
            float: left;
        }

        .head input {
            line-height: 40px;
            padding-left: 20px;
            width: 200px;
            background: #f4f6f9;
            outline: none;
            border: 0;
        }

        main .title {
            font-size: 30px;
            padding: 20px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        main .title div:nth-child(2) {
            font-size: 15px;
            color: #6c757c;
        }

        main .title div:nth-child(2) span {
            color: #147ef8;
        }

        main .chart {
            padding: 0 10px;
            flex: 1;
            display: flex;
            justify-content: space-evenly;
        }

        main .chart #visitor {
            width: 49%;
            height: 90%;
            background-color: white;
        }

        main .chart #sales {
            width: 49%;
            height: 90%;
            background-color: white;
        }
    </style>
</head>

<body>
    <ul class="aside">
        <li class="admin"><span class="iconfont icon-touxiang"></span> AdminLTE 3</li>
        <li class="name"><span class="iconfont icon-touxiang"></span> Alweander Pierce</li>
        <li><span class="iconfont icon-yibiaopan"></span> Dashboard </li>
        <li><span class="iconfont icon-yuanquan"></span>Dashboard v1</li>
        <li><span class="iconfont icon-yuanquan"></span>Dashboard v2</li>
        <li><span class="iconfont icon-yuanquan"></span>Dashboard v3</li>
        <li><span class="iconfont icon-widgets"></span> Widgets</li>
        <li><span class="iconfont icon-charts_pie"></span>charts</li>
        <li><span class="iconfont icon-tree"></span> UI Elements</li>
        <li><span class="iconfont icon-xiugai"></span>Forms</li>
        <li><span class="iconfont icon-table"> </span>Tables</li>
        <li class="example"> EXAMPLES</li>
        <li><span class="iconfont icon-calendar"></span>Calendar</li>
        <li><span class="iconfont icon-mail"></span> Mailbox</li>
        <li><span class="iconfont icon-text-pages"> </span>pages</li>
        <li><span class="extra iconfont icon-plus-square"></span>Extras</li>
    </ul>
    <main>
        <div class="head">
            <div class="headleft">
                <span class="iconfont icon-icon_mulu"></span>
                <ul>
                    <li>Home</li>
                    <li>Contact</li>
                </ul>
                <input type="text" placeholder="Search">
            </div>
        </div>
        <div class="title">
            <div>Dashboard v3</div>
            <div><span>Home</span>/Dashboard v3</div>
        </div>
        <div class="chart">
            <!-- <div id="visitor"></div> -->
            <div id="visitor"></div>
            <div id="sales"></div>
        </div>
</body>

</html>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.0/echarts.js"></script>

<script>
    var chart1 = document.querySelector('#visitor');
    var chart2 = document.querySelector('#sales');
    var e = echarts.init(chart1);
    e.setOption({
        title: {
            text: 'Online Store Vistors',
            top: 10,
            left:10,
        },
        legend: {
            bottom: 25,
            right: 20,
        },
        grid: {
            top: 100,
           
        },
        xAxis: { //x轴设置
            // type:'value',
            data: ['18th', '20th', '22th', '24th', '26th', '30th']
        },
        yAxis: { //y轴设置
            axisLine: { show: true },
            name: 'Visitors Over Time',
            type: 'value',
            min: 0,
            max: 200,
            splitNumber: 10,
            splitLine: {
                show: true,
            }
        },
        series: [ //数据系列
            {
                name: 'This week',
                type: 'line',//'line' , 'bar' , 'pie'
                data: [60, 70, 59, 60, 30],
                symbolSize: 5, //圆点大小
                symbol: 'square',//圆点形状
                smooth: true,
                itemStyle: {
                    normal: {
                        lineStyle: { width: 2 },
                    }
                },
                type: 'line',//'line' , 'bar' , 'pie'
                data: [100, 120, 170, 164, 180, 178, 160]
            },
            {
                name: 'Last Week',
                type: 'line',
                data: [60, 80, 70, 65, 80, 77, 100],
                symbolSize: 5, //圆点大小
                symbol: 'square',//圆点形状
                smooth: true, //是否平滑曲线显示
                itemStyle: {
                    normal: {
                        color: 'grey', //折线颜色
                        lineStyle: { width: 2 }, //折现的宽度
                    }
                }

            }

        ]
    });


    var evt = echarts.init(chart2);
    evt.setOption({
        title: { //图表的标题
            text: 'Sales',
            left: 10,
            top:10,
        },
        legend: {
            bottom: 25,
            right: 20,
        },
        grid: {
            top: 100,
          
        },
        xAxis: { //x轴设置
            // type:'value',
            data: ['JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC']
        },
        yAxis: { //y轴设置
            axisLine: { show: true },
            name: 'Sales Over Time',
            type: 'value',
            min: 0,
            max: 3,
            splitNumber: 3,
            splitLine: {
                show: true,
            }
        },
        series: [ //数据系列
            {
                name: 'This Year',
                type: 'bar',
                barWidth: 20, //柱子的宽度
                data: [1, 2, 3, 2.5, 2.7, 2.4, 3],
                showBackground: false,//显示背景色
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ //颜色(渐变色)
                    { offset: 0, color: 'lightblue' },
                    { offset: 1, color: 'blue' }
                ]),

            },
            {
                name: 'Last Year',
                type: 'bar',
                barWidth: 20,
                data: [0.8, 1.8, 2.8, 2, 1.8, 1.5, 2],
                showBackground: false,//显示背景色
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ //颜色(渐变色)
                    { offset: 0, color: 'lightgray' },
                    { offset: 1, color: 'gray' }
                ]),

            }

        ]



    })





</script>